<template>
  <div class="app-container">
    <div class="query-container">
      <el-form
        ref="queryForm"
        :model="queryParams"
        :label-width="labelWidth"
        :inline="true"
      >
        <el-form-item :label="$t('projectMaintainName')" prop="project_name">
          <el-input v-model="queryParams.project_name" :placeholder="$t('inputprojectMaintainName')" clearable size="small" @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item :label="$t('projectMaintainStatus')" prop="project_status">
          <el-input v-model="queryParams.project_status" :placeholder="$t('inputprojectMaintainStatus')" clearable size="small" @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item :label="$t('projectMaintainOrderNo')" prop="order_no">
          <el-input v-model="queryParams.order_no" :placeholder="$t('inputprojectMaintainOrderNo')" clearable size="small" @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item :label="$t('projectMaintainSalesDate')" prop="sales_date">
          <el-date-picker v-model="queryParams.sales_date" type="date" value-format="yyyy-MM-dd" clearable size="small" :placeholder="$t('inputprojectMaintainSalesDate')" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('search') }}</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('reset') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tool-container">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">{{ $t('addBtn') }}</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table-pro v-loading="loading" :highlight-current-row="true" :data="projectMaintainList" :columns-config="columnsConfig" @sort="sortChange">
      <el-table-column :label="$t('operate')" align="center" width="220" fixed="right" class-name="fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.row)">{{ $t('detailBtn') }}</el-button>
          <el-button v-auth="[]" size="mini" :disabled="scope.row.project_status !== 'O'" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">{{ $t('modifyBtn') }}</el-button>
          <el-dropdown v-more size="mini" trigger="click" @command="command => handleCommand(command, scope.row)">
            <span class="el-dropdown-link">
              <i class="el-icon-d-arrow-right el-icon--right" />{{ $t('moreBtn') }}
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-auth="[]" :disabled="scope.row.project_status !== 'O'" command="handleDelete" icon="el-icon-delete">{{ $t('deleteBtn') }}</el-dropdown-item>
              <el-dropdown-item v-auth="[]" :disabled="scope.row.project_status !== 'O'" command="handleRelease" icon="el-icon-unlock">{{ $t('releaseBtn') }}</el-dropdown-item>
              <el-dropdown-item v-auth="[]" :disabled="scope.row.project_status !== 'R' || scope.row.status === 'C'" command="handleClose" icon="el-icon-close">{{ $t('closeBtn') }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table-pro>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.page_size"
      @pagination="getList"
    />
    <projectmaintain-sheet ref="ProjectmaintainSheet" @refreshList="getList" />
    <projectmaintain-inquire ref="ProjectmaintainInquire" />
  </div>
</template>

<script>
import { deleteProjectMaintainApi, releaseMaintainProjectBaseApi, closeMaintainProjectBaseApi } from '../api/projectmaintain.api'
import ElTablePro from '@/components/ElTablePro'
import listMixin from '@/mixins/ListMixin'
import { mapGetters } from 'vuex';
import ProjectmaintainSheet from './projectmaintain-sheet.vue';
import ProjectmaintainInquire from './projectmaintain-inquire.vue';

export default {
  name: 'ProjectMaintainList',
  components: {
    ElTablePro,
    ProjectmaintainSheet,
    ProjectmaintainInquire
  },
  mixins: [listMixin],
  data() {
    return {
      queryParams: {
        'sales_date': undefined,
        'project_name': undefined,
        'project_status': undefined,
        'order_no': undefined
      },
      actionFuncName: 'project/getProjectMaintainList',
      actionApi: {
        'delete': deleteProjectMaintainApi
      }
    }
  },
  computed: {
    ...mapGetters(['projectMaintainList', 'name']),
    columnsConfig() {
      return [
        { prop: 'serial_number', label: this.$t('serialNumber'), 'width': 100 },
        { prop: 'project_plan_name', label: this.$t('projectPlanName'), 'width': 250, 'show-overflow-tooltip': true },
        { prop: 'order_no', label: this.$t('projectMaintainOrderNo'), 'width': 100 },
        { prop: 'quote_no', label: this.$t('quoteNo'), 'width': 100 },
        { prop: 'project_name', label: this.$t('projectMaintainName'), 'width': 200, 'show-overflow-tooltip': true },
        { prop: 'project_status_desc', label: this.$t('projectMaintainStatus'), align: 'center', 'width': 80 },
        { prop: 'sales_date', label: this.$t('projectMaintainSalesDate'), align: 'center', 'width': 120 },
        { prop: 'sales_amount', label: this.$t('projectMaintainSalesAmount'), align: 'right', 'width': 120 },
        { prop: 'procurement_obj', label: this.$t('projectMaintainObj'), align: 'right', 'width': 120 },
        { prop: 'procurement_affect', label: this.$t('projectMaintainaffect'), align: 'right', 'width': 120 },
        { prop: 'quoted_days', label: this.$t('projectMaintainQuoteDays'), align: 'right', 'width': 130 },
        { prop: 'quoted_hours', label: this.$t('projectMaintainQuoteHours'), align: 'right', 'width': 130 },
        { prop: 'bugdget_hours', label: this.$t('projectMaintainBudgetHours'), align: 'right', 'width': 130 },
        { prop: 'reserve_hours', label: this.$t('projectMaintainReserveHours'), align: 'right', 'width': 130 },
        { prop: 'note', label: this.$t('projectMaintainNote'), 'width': 220 },
        { prop: 'created', label: this.$t('createdUser'), 'width': 100 },
        { prop: 'created_date', label: this.$t('createdDate'), 'width': 160 },
        { prop: 'created_program', label: this.$t('createdProgram'), 'width': 200, 'show-overflow-tooltip': true },
        { prop: 'updated', label: this.$t('updatedUser'), 'width': 100 },
        { prop: 'updated_date', label: this.$t('updatedDate'), 'width': 160 },
        { prop: 'updated_program', label: this.$t('updatedProgram'), 'width': 200, 'show-overflow-tooltip': true }
      ]
    },
    labelWidth() {
      // 根据国际化设置确定标签宽度,如果语言环境是英语，则返回150px
      return this.$i18n.locale === 'en' ? '150px' : '100px';
    }
  },
  methods: {
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case 'handleDelete':
          this.handleDelete(row);
          break;
        case 'handleRelease':
          this.handleRelease(row);
          break;
        case 'handleClose':
          this.handleClose(row)
          break;
        default:
          break;
      }
    },
    /** 点击明细按钮 */
    handleDetail(row) {
      this.$refs.ProjectmaintainInquire.openSheetDialog(row);
    },
    handleAdd() {
      this.$refs.ProjectmaintainSheet.openSheetDialog()
    },
    handleUpdate(row) {
      this.$refs.ProjectmaintainSheet.openSheetDialog({ ...row })
    },
    // 删除按钮
    handleDelete(row) {
      const confirmMessage = this.$t('dataDeleteConfirm', { title: this.$t('projectMaintainOrderNo'), value: row.order_no })
      const successMessage = this.$t('deleteSuccess', { title: this.$t('projectMaintainOrderNo'), value: row.order_no })
      this.handleAction('delete', row.id, confirmMessage, successMessage)
    },
    // 生效按钮
    handleRelease(row) {
      this.$confirm(
        this.$t('dataReleaseConfirm', {
          title: this.$t('projectMaintainOrderNo'),
          value: row.order_no
        }),
        this.$t('warning'),
        {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'), cancelButtonClass: 'btn-cancel-to-right',
          type: 'warning'
        }
      ).then(async() => {
        var resp = await releaseMaintainProjectBaseApi(row.id);
        if (resp.success) {
          this.targaMessage(
            this.$t('releaseSuccess', {
              title: this.$t('projectMaintainOrderNo'),
              value: row.order_no
            })
          );
          this.getList();
        } else {
          this.targaMessageBox(this, resp.msg);
        }
      });
    },
    // 关闭按钮
    handleClose(row) {
      this.$confirm(
        this.$t('dataCloseConfirm', {
          title: this.$t('projectMaintainOrderNo'),
          value: row.order_no
        }),
        this.$t('warning'),
        {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'), cancelButtonClass: 'btn-cancel-to-right',
          type: 'warning'
        }
      ).then(async() => {
        var resp = await closeMaintainProjectBaseApi(row.id);
        if (resp.success) {
          this.targaMessage(
            this.$t('closeSuccess', {
              title: this.$t('projectMaintainOrderNo'),
              value: row.order_no
            })
          );
          this.getList();
        } else {
          this.targaMessageBox(this, resp.msg);
        }
      });
    }
  }

}
</script>

  <style scoped>
  .el-input input, .el-select .el-input__inner {
    width: 220px;
    box-sizing: border-box;
  }
  </style>
